/**
 * @class Ext.ux.LiveSearchGridPanel
 * @extends Ext.grid.Panel
 * <p>A GridPanel class with live search support.</p>
 * @author Nicolas Ferrero
 */

//TODO Opschonen
Ext.define('ProjectAON.ux.LiveSearchGridPanel', {
    extend:'Ext.grid.Panel',
    requires:[
        'Ext.toolbar.TextItem',
        'Ext.form.field.Checkbox',
        'Ext.form.field.Text',
        'ProjectAON.ux.statusbar.StatusBar',
        'Ext.grid.PagingScroller'
    ],
    alias:'widget.searchgrid',

    /**
     * @private
     * search value initialization
     */
    searchValue:null,

    /**
     * @private
     * The row indexes where matching strings are found. (used by previous and next buttons)
     */
    indexes:[],

    /**
     * @private
     * The row index of the first search, it could change if next or previous buttons are used.
     */
    currentIndex:null,

    /**
     * @private
     * The generated regular expression used for searching.
     */
    searchRegExp:null,

    /**
     * @private
     * Case sensitive mode.
     */
    caseSensitive:false,

    /**
     * @private
     * Regular expression mode.
     */
    regExpMode:false,

    //filterType: false,

    /**
     * @cfg {String} matchCls
     * The matched string css classe.
     */
    matchCls:'x-livesearch-match',

    defaultStatusText:'Geen zoekopdracht ingegeven',

    setTitle:'Alle gebruikers',

    // Component initialization override: adds the top and bottom toolbars and setup headers renderer.
    initComponent:function () {
        var me = this;
        me.bbar = Ext.create('ProjectAON.ux.StatusBar', {
            defaultText:me.defaultStatusText,
            name:'searchStatusBar'
        });

        me.callParent(arguments);
    },

    // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input
    afterRender:function () {
        var me = this;
        me.callParent(arguments);
        me.statusBar = me.down('statusbar[name=searchStatusBar]');
    },
    // detects html tag
    tagsRe:/<[^>]*>/gm,

    // DEL ASCII code
    tagsProtect:'\x0f',

    // detects regexp reserved word
    regExpProtect:/\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,

    /**
     * In normal mode it returns the value with protected regexp characters.
     * In regular expression mode it returns the raw value except if the regexp is invalid.
     * @return {String} The value to process or null if the textfield value is blank or invalid.
     * @private
     */
    getSearchValue:function () {
        var me = this,
            value = me.textField.getValue();

        if (value === '') {
            return null;
        }
        if (!me.regExpMode) {
            value = value.replace(me.regExpProtect, function (m) {
                return '\\' + m;
            });
        } else {
            try {
                new RegExp(value);
            } catch (error) {
                me.statusBar.setStatus({
                    text:error.message,
                    iconCls:'x-status-error'
                });
                return null;
            }
            // this is stupid
            if (value === '^' || value === '$') {
                return null;
            }
        }

        return value;
    },

    /**
     * Finds all strings that matches the searched value in each grid cells.
     * @private
     */
    onTextFieldChange:function () {
        var me = this;

        me.store.clearFilter();

        me.view.refresh();
        // reset the statusbar
        me.statusBar.setStatus({
            text:me.defaultStatusText
        });

        me.refreshGrid();

        // no results found
        if (me.currentIndex === null) {
            me.getSelectionModel().deselectAll();
        }

        // force textfield focus
        me.textField.focus();
    },

    /**
     * Selects the previous row containing a match.
     * @private
     */
    onPreviousClick:function () {
        var me = this,
            idx;

        if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
            me.currentIndex = me.indexes[idx - 1] || me.indexes[me.indexes.length - 1];
            me.getSelectionModel().select(me.currentIndex);
        }
    },

    /**
     * Selects the next row containing a match.
     * @private
     */
    onNextClick:function () {
        var me = this,
            idx;

        if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
            me.currentIndex = me.indexes[idx + 1] || me.indexes[0];
            me.getSelectionModel().select(me.currentIndex);
        }
    },

    /**
     * Switch to case sensitive mode.
     * @private
     */
    caseSensitiveToggle:function (checkbox, checked) {
        this.caseSensitive = checked;
        this.onTextFieldChange();
    },

    /**
     * Switch to regular expression mode
     * @private
     */
    regExpToggle:function (checkbox, checked) {
        this.regExpMode = checked;
        this.onTextFieldChange();
    },

    /* Visuele feedback activeren
     enableColourFeedBack:function (checkbox, checked) {
     this.colourFeedBack = checked;
     this.onTextFieldChange();
     },*/

    filterGrid:function () {
        var me = this;

        if (me.searchValue !== null && this.searchValue != '') {
            me.searchRegExp = new RegExp(this.searchValue, 'g' + (this.caseSensitive ? '' : 'i'));

            me.store.filter(new Ext.util.Filter({
                filterFn:function (object) {
                    var match = false;
                    Ext.Object.each(object.data, function (property, value) {
                        match = match || me.searchRegExp.test(String(value));
                    });
                    return match;
                }
            }));
        }
    },

    updateStatusBar:function () {
        var me = this;
        var msg = "";
        //TODO Overbodig
        me.currentIndex = null;
        if (me.searchValue == null) {
            msg = me.defaultStatusText;
        } else if (me.store.getCount() < 1) {
            msg = 'Geen resultaten gevonden';
        } else {
            msg = me.store.getCount() + ' resultaten gevonden';
        }
        if (me.currentIndex != undefined) {
            me.getSelectionModel().select(me.currentIndex);
        }
        me.statusBar.setStatus({
            text:msg
        });
    },

    refreshGrid:function () {
        this.searchValue = this.getSearchValue();
        this.filterGrid();
        this.updateStatusBar();
        //this.showColourFeedBack()
    },

    setTextfieldReference:function (tf) {
        this.textField = tf;
    }

    // Dit is voor visuele feedback
    /*showColourFeedBack:function (store, object) {
        var me = object;
        if (me.searchValue !== null) {
            me.store.each(function (record, idx) {
                var td = Ext.fly(me.view.getNode(idx)).down('td'),
                    cell, matches, cellHTML;

                while (td) {
                    cell = td.down('.x-grid-cell-inner');
                    matches = cell.dom.innerHTML.match(me.tagsRe);
                    cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);

                    // populate indexes array, set currentIndex, and replace wrap matched string in a span
                    cellHTML = cellHTML.replace(me.searchRegExp, function (m) {
                        //count += 1;
                        if (Ext.Array.indexOf(me.indexes, idx) === -1) {
                            me.indexes.push(idx);
                        }
                        if (me.currentIndex === null) {
                            me.currentIndex = idx;
                        }
                        //return '<span class="' + me.matchCls + '">' + m + '</span>';
                        return '<span style="color:red;">' + m + '</span>';
                    });
                    // restore protected tags
                    Ext.each(matches, function (match) {
                        cellHTML = cellHTML.replace(me.tagsProtect, match);
                    });
                    // update cell html
                    cell.dom.innerHTML = cellHTML;
                    td = td.next();
                }
            }, me);
        }
    }*/
});